<template>
  <div ref="chartRef" style="min-height: 680px; min-width: 550px"></div>
</template>
<script lang="ts" setup>
  import { useECharts } from '/@/hooks/web/useECharts';
  import { ref, Ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  import json from './341824.json';
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  echarts.registerMap('js', json);
  const data = [
    { name: '上庄镇', value: 12 },
    { name: '长安镇', value: 12 },
    { name: '荆州乡', value: 34 },
    { name: '临溪镇', value: 21 },
    { name: '华阳镇', value: 12 },
    { name: '扬溪镇', value: 2 },
    { name: '瀛洲镇', value: 2 },
    { name: '生态工业园区', value: 5 },
    { name: '家朋乡', value: 4 },
    { name: '金沙镇', value: 12 },
    { name: '板桥头乡', value: 1 },
    { name: '伏岭镇', value: 4 },
  ];
  const option: any = {
    backgroundColor: '#faf5eb',
    title: {
      top: 20,
      text: '',
      subtext: '',
      x: 'center',
      textStyle: {
        color: '#ffffff',
      },
    },

    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (typeof params.value[2] == 'undefined') {
          return params.name + ' : ' + params.value;
        } else {
          return params.name + ' : ' + params.value[2];
        }
      },
    },
    visualMap: {
      min: 0,
      max: 100000,
      left: 26,
      bottom: 40,
      showLabel: true,
      text: ['高', '低'],
      pieces: [
        {
          gt: 10000,
          label: '> 10000人',
          color: '#7f1100',
        },
        {
          gte: 1000,
          lte: 10000,
          label: '1000 - 10000人',
          color: '#ff5428',
        },
        {
          gte: 100,
          lt: 1000,
          label: '100 - 1000人',
          color: '#ff8c71',
        },
        {
          gte: 10,
          lt: 100,
          label: '10 - 100人',
          color: '#ffd768',
        },
        {
          gte: 1,
          lt: 10,
          label: '1 - 10人',
          color: '#BEDAEE',
        },
      ],
      show: true,
    },
    geo: [
      {
        map: 'js',
        roam: false, //是否允许缩放
        zoom: 1.1, //默认显示级别
        scaleLimit: {
          min: 0,
          max: 3,
        }, //缩放级别
        itemStyle: {
          normal: {
            areaColor: 'transparent',
            borderColor: '#FFF',
            borderWidth: 2,
            // shadowColor: 'rgba(63, 218, 255, 0.5)',
            shadowBlur: 30,
          },
          emphasis: {
            areaColor: '#FFF',
          },
        },
        tooltip: {
          show: false,
        },
      },
    ],
    series: [
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        z: 5,
        data: [],
        symbolSize: 14,
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              console.log(params, 'parsms');
              return '{fline|地点：' + params.data.city + '}\n{tline|' + (params.data.info || '发生xx集件') + '}';
            },
            position: 'top',
            backgroundColor: 'rgba(233,63,66,.9)',
            padding: [0, 0],
            borderRadius: 3,
            lineHeight: 32,
            color: '#ffffff',
            rich: {
              fline: {
                padding: [0, 10, 10, 10],
                color: '#ffffff',
              },
              tline: {
                padding: [10, 10, 0, 10],
                color: '#ffffff',
              },
            },
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          color: '#e93f42',
        },
      },

      //地图
      {
        type: 'map',
        mapType: 'js',
        geoIndex: -1,
        zoom: 1.1, //默认显示级别
        label: {
          show: true,
          color: '#000',
          emphasis: {
            color: 'white',
            show: false,
          },
        },
        itemStyle: {
          normal: {
            borderColor: '#faf5eb',
            borderWidth: 1,
            areaColor: '#faf5eb',
          },
          emphasis: {
            areaColor: '#ffa',
            borderWidth: 0,
            color: 'green',
          },
        },
        data: data,
      },
    ],
  };
  onMounted(() => {
    setOptions(option);
  });
</script>
<style scoped></style>
